<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="xmb" uri="http://xmb.suishoupai.com/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>添加黑名单人员 </title>
    <jsp:include page="common/common_css.jsp"/>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <jsp:include page="common/message.jsp"/>
    <table class="ui celled padded table">
        <thead>
        <tr>
            <th colspan="5" class="center aligned">
                <div id="JS-search" class="ui input">
                    <input type="text" placeholder="输入用户id后回车" value="${user!=null?user.id:''}">
                </div>
            </th>
        </tr>
        <c:if test="${user!=null}">
            <tr>
                <th class="center aligned">id</th>
                <th class="center aligned">email</th>
                <th class="center aligned">角色</th>
                <th class="center aligned">时间</th>
                <th class="center aligned">操作</th>
            </tr>
        </c:if>
        </thead>
        <tbody>
        <c:if test="${user!=null}">
            <tr data-id="${user.id}">
                <td class="center aligned">${user.id}</td>
                <td class="center aligned">${user.email}</td>
                <td class="center aligned">${user.role}</td>
                <td class="center aligned"><xmb:formatDate value="${user.createTime}"/></td>
                <td class="center aligned">
                    <c:choose>
                        <c:when test="${isBlacklist}">
                            该用户已存在黑名单中
                        </c:when>
                        <c:otherwise>
                            <button class="ui basic button JS-add">
                                <i class="add circle icon"></i>
                                加入黑名单
                            </button>
                        </c:otherwise>
                    </c:choose>
                </td>
            </tr>
        </c:if>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>
<div id="JS-modal-input" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div class="header" style="display: inline-block;color: black;margin-bottom: 20px;">
            </div>
            <br>
            <div class="ui input" style="margin-bottom: 20px;">
                <input type="text" placeholder="在这里输入原因">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        $('#JS-search input').keydown(function (e) {
            if (e.keyCode == 13) {
                var userId = $('#JS-search input').val();
                if (userId == '') {
                    alert("请输入内容！");
                    return;
                }
                window.location.href = ROOT + "/blacklist/add?userId=" + userId;
            }
        });
        $('.JS-add').click(function () {
            var userId = $(this).parent().parent().data('id');
            $('#JS-modal-input .header').text("确定将'" + userId + "'加入黑名单？");
            $('#JS-modal-input input').val("");
            $('#JS-modal-input').modal({
                allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    var description = $('#JS-modal-input input').val();
                    if (description === '') {
                        alert("请输入原因。");
                        return false;
                    }
                    if ($('#JS-modal-input .actions .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-input .actions .approve.button').addClass('loading');
                    common.ajax({
                        url: ROOT + "/blacklist",
                        data: {
                            userId: userId,
                            description: description
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            window.location.reload();
                        },
                        complete: function () {
                            $('#JS-modal-input .actions .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-input .actions .approve.button').hasClass('loading');
                }
            }).modal("show");
            return false;
        });
    });
</script>
</body>
</html>
